<template>
<div id="Shenghuohui">
  <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top:1px;padding-bottom:20px;font-size:16px;">
    <el-breadcrumb-item><b>民主生活会</b></el-breadcrumb-item>
  </el-breadcrumb>
  <section>
    <div id="editswitch"><el-switch v-model="editVisible" active-color="#13ce66" inactive-color="#ff4949" :change="editBtnsShow()"></el-switch> <span>编辑</span></div>
    <el-table :data="shhlist" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" label="序号" width="70">
      </el-table-column>
      <el-table-column prop="TheYear" label="年度" width="120">
      </el-table-column>
      <el-table-column prop="Name" label="标题">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <span v-show="editBtnsVisible" ref="EditBtns" style="margin:0 10px 0 0">
            <el-button size="small" @click="handleEdit(scope.row.Id)" type="primary">修改</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row.Id)">删除</el-button>
          </span>
          <el-button size="small" @click="shhshow(scope.row.Id, scope.row.Name)" type="primary">进入</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button v-show="editBtnsVisible" type="success" @click="handleAdd" icon="el-icon-plus" style="margin-top:20px">新增</el-button>
    <!--新增界面-->
    <el-dialog title="新增生活会" :visible.sync="addFormVisible">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="标题" prop="Name">
          <el-input v-model="addForm.Name" auto-complete="off" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="年度" prop="TheYear">
          <el-date-picker v-model="addForm.TheYear" type="year" placeholder="选择年度" format="yyyy" value-format="yyyy"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addFormSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--修改界面-->
    <el-dialog title="修改生活会" :visible.sync="editFormVisible">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="标题" prop="Name">
          <el-input v-model="editForm.Name" auto-complete="off" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="年度" prop="TheYear">
          <el-date-picker v-model="editForm.TheYear" type="year" placeholder="选择年度" format="yyyy" value-format="yyyy"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editFormSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</div>
</template>

<script>
export default {
  data () {
    return {
      editVisible: false,
      editBtnsVisible: true,
      shhlist: [],
      listLoading: false,
      totalnum: 0,
      addFormVisible: false, // 新增界面是否显示
      addLoading: false,
      // 新增界面数据
      addForm: {
        Name: '',
        TheYear: ''
      },
      addFormRules: {
        Name: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        TheYear: [
          { required: true, message: '请选择年度', trigger: 'blur' }
        ]
      },
      editFormRules: {
        Name: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        TheYear: [
          { required: true, message: '请选择年度', trigger: 'blur' }
        ]
      },
      editFormVisible: false, // 编辑界面是否显示
      editLoading: false,
      // 编辑界面数据
      editForm: {
        Name: '',
        TheYear: '',
        Id: 0
      }
    }
  },
  methods: {
    shhshow: function (id, Name) {
      this.$router.push({name: `ShenghuohuiDetail`, params: {id: id}})
    },
    showperson (id) {
      this.mypersonid = id
      console.log('mypersonid:' + this.mypersonid)
      this.showpersonVisible = true
    },
    editBtnsShow () {
      console.log(this.editVisible)
      this.editBtnsVisible = this.editVisible
    },
    // 获取用户列表
    getShh () {
      var _this = this
      this.listLoading = true
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(`/shenghuohui/list`)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.shhlist = response.data.Result
            if (response.data.IsAdmin === false) {
              _this.$router.replace('/shenghuohui/list')
            }
            console.log('获取总数:' + response.data.Msg)
            console.log('获取size:' + _this.pagenum)
            _this.totalnum = parseInt(response.data.Msg)
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 显示新增界面
    handleAdd: function () {
      this.addFormVisible = true
      console.log('显示新增界面:' + this.addFormVisible)
      this.addForm = {
        title: '',
        year: ''
      }
    },
    // 显示编辑界面
    handleEdit: function (id) {
      for (var i = 0; i < this.shhlist.length; i++) {
        if (this.shhlist[i].Id === id) {
          let objData = Object.assign({}, this.shhlist[i])
          this.editForm.Name = objData.Name
          this.editForm.Id = objData.Id
          var mydate = new Date(objData.TheYear + '-1-1')
          this.editForm.TheYear = mydate
          this.editFormVisible = true
          break
        }
      }
    },
    // 新增
    addFormSubmit: function () {
      var _this = this
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          _this.addLoading = true
          let para = {
            Name: this.addForm.Name,
            TheYear: this.addForm.TheYear
          }
          this.$http.post(`/shenghuohui/add`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.$message({
                message: '提交成功',
                type: 'success'
              })
              _this.$refs['addForm'].resetFields()
              _this.addFormVisible = false
              _this.addLoading = false
              _this.getShh()
            } else {
              console.log('提交失败:' + response.data.Msg)
              _this.$message({
                message: '提交失败:' + response.data.Msg,
                type: 'error'
              })
              _this.addLoading = false
            }
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '提交失败:' + error,
              type: 'error'
            })
            _this.addLoading = false
          })
        }
      })
    },
    // 编辑
    editFormSubmit: function () {
      var _this = this
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          _this.editLoading = true
          let TheYear = new Date(this.editForm.TheYear).getFullYear()
          let para = {
            Name: this.editForm.Name,
            TheYear: TheYear,
            Id: this.editForm.Id
          }
          this.$http.post(`/shenghuohui/edit`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.editLoading = false
              _this.$message({
                message: '修改成功',
                type: 'success'
              })
              _this.$refs['editForm'].resetFields()
              _this.editFormVisible = false
            } else {
              _this.editLoading = false
              console.log('修改失败:' + response.data.Msg)
              _this.$message({
                message: '修改失败:' + response.data.Msg,
                type: 'error'
              })
            }
            _this.getShh()
          }).catch(function (error) {
            _this.editLoading = false
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
        }
      })
    },
    // 删除
    handleDel: function (id) {
      var _this = this
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        let para = { Id: id }
        this.$http.post(`/shenghuohui/delete`, para).then(function (response) {
          if (response.data.IsSuccess === true) {
            _this.addLoading = false
            _this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            console.log('删除失败:' + response.data.Msg)
            _this.$message({
              message: '删除失败:' + response.data.Msg,
              type: 'error'
            })
          }
          _this.getShh()
        })
      })
    }
  },
  mounted () {
    this.getShh()
  }
}
</script>
<style scoped>
#Shenghuohui{
  padding: 20px
}
</style>
